<template>
  <div class="login">
    <div class="login-container">
      <h2>嘿嘿嘿管理系统</h2>
      <el-row>
        <el-input v-model="account" 
        class="w-50 m-2"
        size="lagre"
         placeholder="账号" 
         :prefix-icon="UserFilled" 
         
         />
      </el-row>

      <el-row>
        <el-input v-model="password" 
        class="w-50 m-2"
         placeholder="密码"
         size="lagre" 
         :prefix-icon="Lock" 
         />
      </el-row>
      
      <el-button type="primary" size="large" @click="signIn" >登录</el-button>
      
    </div>
  </div>
</template>

<script>
import { UserFilled,Lock } from '@element-plus/icons-vue'
import { reactive,toRefs} from 'vue';
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router'

export default {
  setup() {

    const route=useRouter()
    const signIn=()=>{
      // 拿到用户输入的账号和密码，发接口请求给后端
      if(!state.account || !state.password){
        ElMessage.error('账号或密码不能为空')
        return
      }
      route.push('./home')
    }
    
    const state=reactive({
      account:'',
      password:''
    })

    return {
      signIn,
      UserFilled,
      Lock,
      ...toRefs(state)
    }
  }
}
</script>

<style  scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: darkgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  width: 400px;
  height: 360px;
  border: 1px solid black;
  color: #fff;
  text-align: center;
}

h2 {
  line-height: 3;
}

.el-row{
  width: 80%;
  margin: 0 auto;
}

.el-row{
  margin-bottom: 20px;
}

.el-button--primary{
  width: 80%;
  
}
</style>